<template>
	<view class="order-analysis-container">
		<view class="state">
			<view class="title">
				<view>当前碳资产</view>
			</view>
			<view class="middle">
				<view class="charts">
					<l-echart ref="chartRef" @finished="init"></l-echart>
				</view>
				<view class="total">
					
					<view class="num">{{stateTotal}}</view>
					<view class="txt">tCO₂</view>
				</view>
				<view class="state-list">
					<!-- 状态循环 -->
					<view class="state-child" v-for="item in stateList" :key="item.id">
						<view class="left-title">
							<view class="iconfont icon-24gf-square" :style="{backgroundColor: item.color}"></view>
							<text class="txt">{{item.name}}</text>
						</view>

						<text class="num">{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
		onMounted
	} from 'vue'
	import Echarts from "@/components/echarts/echarts.vue";
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif
	import {
		reqStateCount
	} from "@/api/model/photovoltaic"
	defineOptions({
		name: "OrderAnalysis"
	})
	const props = defineProps({
		parkId: {
			type: String
		}
	})
	const chartRef = ref(null)
	const option = {
		tooltip: {
			trigger: 'item'
		},
		grid: {
			top: '0',
			bottom: '20'
		},
		series: [{
			type: 'pie',
			radius: ['40%', '65%'],
			color: ['#FFC749', '#F38A64', '#5CD5E5', '#44B1F5', '#6BDFA0', '#EE7B8E', '#867DFF', ],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center'
			},
			labelLine: {
				show: false
			},
			data: [],
		}]
	}
	const stateTotal = ref(0)
	const stateList = ref([{
			id: 0,
			name: '政府发放免费配额',
			value: '',
			color: '#FFC749'
		},
		{
			id: 1,
			name: '结转配额',
			value: '',
			color: '#F38A64'
		},
		{
			id: 2,
			name: '可用CCER',
			value: '',
			color: '#5CD5E5'
		},
	
		

	])
	// console.log("orderAnalysis==setup", activeTabSon)

	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(option);
	}
	//获取工单数据
	const getData = async () => {

		let res = await reqStateCount()

		let filteredData = res.data.data.filter(item => item.key != 4 && item.key != 7) //没有4的状态， 过滤掉
		let arrData = filteredData.map(item => item.value)
		stateTotal.value = filteredData.reduce((accumulator, item) => accumulator + item.value, 0);
		// console.log("过滤后数组", stateTotal.value)
		// option.series[0].data = arrData
		const mergedData = stateList.value.map(item => {
			const match = filteredData.find(d => d.key === item.id.toString()); // 根据 id 和 key 进行匹配
			return {
				...item,
				value: match ? match.value : item.value, // 如果找到匹配项，则替换 value；否则保留原值
			};
		});

		stateList.value = mergedData
		option.series[0].data = mergedData
		init()

	}
	onMounted(() => {
		getData()
	})
	watch(() => props.parkId, (val) => {
		// console.log("得到的", val)
		// getData()
	})
</script>

<style lang="scss" scoped>
	.order-analysis-container {
		.state {
			margin-top: 4rpx;
			height: 600rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 8rpx 0rpx rgba(224, 229, 237, 0.5);
			border-radius: 10rpx;

			.title {
				display: flex;
				height: 76rpx;
				margin-left: 34rpx;
				font-size: 14px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.middle {
				position: relative;
				margin-top: 18rpx;

				.charts {
					width: 740rpx;
					height: 500rpx;
					margin-left: -140rpx;
					margin-top: -40rpx;

					::v-deep {
						.uni-canvas-canvas {
							top: -40rpx;
						}
					}

				}

				.total {
					position: absolute;
					top: 160rpx;
					left: 200rpx;
					text-align: center;

					.txt {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.num {
						font-size: 48rpx;
						font-family: DINAlternateBold;
						font-weight: bold;
						color: #333333;
					}
				}

				.state-list {
					position: absolute;
					right: 30rpx;
					top: 100rpx;
					width: 220rpx;


					.state-child {
						height: 70rpx;
						margin-bottom: 18rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left-title {
							display: flex;
							align-items: center;

							.iconfont {
								width: 12rpx;
								height: 12rpx;
								margin-right: 16rpx;
							}

							.txt {
								vertical-align: middle;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
							}
						}

						.num {
							margin-top: 6rpx;
							float: right;
							font-size: 32rpx;
							font-family: DINAlternateBold;
							font-weight: bold;
							color: #333333;
						}

					}
				}
			}
		}
	}
</style>